<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<title>购物车</title>
		<style type="text/css">
			/*购物车*/
			.cart-box{
				background-color: #fff;
			}
			input[type="checkbox"]{
				width: 0.12rem;
				height: 0.12rem;
			}
			.cart-header{
				border-bottom: 1px solid #E8E7E7;
				width: 95%;
				margin: 0 auto;
				height: 0.35rem;
				line-height: 0.35rem;
				padding: 0 0.05rem;
			}
			.cart-left{
				/*display: inline-block;*/
				float: left;
			}
			.cart-left input{
				vertical-align: middle;
			}
			.cart-left label{}
			.cart-right{
				/*display: inline-block;*/
				float: right;
				margin-right: 0.05rem;
			}
			.cart-right a.cart-del{
				border: 1px solid #555;
				-webkit-border-radius: 0.05rem;
				-moz-border-radius: 0.05rem;
				border-radius: 0.05rem;
				color: #777;
				display: inline-block;
				line-height: normal;
				padding: 0.05rem 0.15rem;
			}
			.cart-list{
				clear: both;
				width: 95%;
				margin: 0 auto;
			}
			.cart-block{
				border-bottom: 1px solid #F0F0F0;
				/*height: 84px;*/
				padding: 0.05rem;
			}
			.cart-left-ipt{
				line-height: 540%;
			}
			/*.cart-right2 a{
				display: block;
				width: .6rem;
				height: .6rem;
			}*/
			.cart-right2 img{
				width: .6rem;
				height: .6rem;
			}
			.cart-right-left{
				float: left;
			}
			.cart-right-left img{
				/*border: 1px solid #8F8F8E;*/
				margin: 0.02rem 0.05rem 0;
			}
			.cart-right-right{
				/*float: right;
				width: 69%;*/
			}
			.cart-right-right div{
				color: #777;
				text-align: left;
			}
			.crr-title{
				/*margin-top: 3px; 与.cart-right-right联动*/
			}
			.crr-buy{
				margin-top: 0.1rem;
			}
			.cart-integral{
				color: #F16661;
				display: inline-block;
				float: left;
			}
			.cart-buy-num{
				display: inline-block;
				float: right;
				margin-right: 0.05rem;
			}
			.cart-buy-num a{
				display: inline-block;
				font-size: 0.14rem;
				border: 1px solid #8F8F8E;
				width: 0.18rem;
				height: 0.14rem;
				text-align: center;
				line-height: 0.14rem;
				border-radius: 0.03rem;
			}
			.cart-buy-num input, .gcd-p2-span input{
				border: 1px solid #999;
				-webkit-border-radius: 0.03rem;
				-moz-border-radius: 0.03rem;
				border-radius: 0.03rem;
				height: 0.14rem;
				text-align: center;
				width: 0.32rem;
			}
			.sub-cart{
				font-size: 0.14rem;
				height: 0.4rem;
			    line-height: 0.4rem;
			    position: fixed;
			    bottom: 0;
			    background-color: #fff;
			    width: 100%;
			}
			.sub-catinner{
				width: 95%;
				margin: 0 auto;
			}
			.sc-total-ipt{
				margin-top: -0.01rem;
			}
			.total-integral{
				color: #999;
				padding-left: 0.05rem;
			}
			.total-integral-val{
				color: #F16661;
			}
			.sub-cart-right{
				background-color: #ED6C00;
				display: block;
				float: right;
				text-align: center;
				width: 1.24rem;
			}
			.sub-cart-right a{
				color: #fff;
				display: block;
			}
			/*购物车*/
		</style>
	</head>
	
	<body>
		<div class="box">
			<div class="header">
				<div class="back"><a href="javascript:history.back(-1);">返回</a></div>
				<div class="head-title">
					<span>购物车</span>
					<span>18011119999</span>
				</div>
				<div class="close"><a href="javascript:;">关闭</a></div>
			</div>
			<div class="cart-box">
				<div class="cart-header">
					<div class="cart-left">
						<input id="checkAll" type="checkbox" name="checkAll" class="checkAll" />
						<label for="sltAll">全选</label>
					</div>
					<div class="cart-right">
						<a href="javascript:;" class="cart-del">删除</a>
					</div>
					<div class="clean"></div>
				</div>
				<div class="cart-list">
					<!--商品块-->
					<div class="cart-block">
						<div class="cart-left cart-left-ipt"><input type="checkbox" name="subBox" /></div>
						<div class="cart-right2">
							<a href="javascript:;" class="cart-right-left"><img src="images/img-7.png" /></a>
							<div class="cart-right-right">
								<div class="crr-title">KOOLIFE 苹果iPhone 6/6s手机壳保护套硅胶软壳 iPhone6s透明壳 薄外壳</div>
								<div class="crr-buy">
									<span class="cart-integral">1820</span><span>积分</span>
									<span class="cart-buy-num">
										<a class="reducenum" href="javascript:;" onclick="reduceNum()" >-</a>
										<input type="text" id="inputnum"  name="num" class="shop-num inputnum" value="1" />
										<a class="addnum" href="javascript:;" onclick="addNum()" >+</a>
									</span>
									<div class="clean"></div>
								</div>
							</div>
							<div class="clean"></div>
						</div>
						<div class="clean"></div>
					</div>
					<!--商品块-->
					<div class="cart-block">
						<div class="cart-left cart-left-ipt"><input type="checkbox" name="subBox"  /></div>
						<div class="cart-right2">
							<a href="javascript:;" class="cart-right-left"><img src="images/img-8.png" /></a>
							<div class="cart-right-right">
								<div class="crr-title">飞毛腿 SC-U520/S102 2口USB电源适配器/充电器 输入5V/2.1A</div>
								<div class="crr-buy">
									<span class="cart-integral">3040</span><span>积分</span>
									<span class="cart-buy-num">
										<a class="reducenum" href="javascript:;" onclick="reduceNum()" >-</a>
										<input type="text" name="num" class="shop-num inputnum" value="1" />
										<a class="addnum" href="javascript:addNum();">+</a>
									</span>
									<div class="clean"></div>
								</div>
							</div>
							<div class="clean"></div>
						</div>
						<div class="clean"></div>
					</div>
				</div>
			</div>

			<div class="sub-cart">
				<div class="sub-catinner">
					<div class="cart-left">
						<input type="checkbox" name="checkAll" class="checkAll" class="sc-total-ipt" />
						<label for="sltTotal">全选</label>
						<span class="total-integral">
							<span>合计：</span>
							<span class="total-integral-val">0</span><span>积分</span>
						</span>
					</div>
					<div class="sub-cart-right">
						<a href="order-suc.html">提交订单</a>
					</div>
					<div class="clean"></div>
				</div>
			</div>
			<!-- <div class="menu">
				<a href="index.html">首页</a>
				<a href="build.html">服务</a>
				<a href="build.html">商品</a>
				<a href="build.html">我的联通</a>
			</div> -->
		</div>
		<script src="script/libs/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="script/libs/xyPop.js" type="text/javascript" charset="utf-8"></script>
		<script src="script/js/shop-cart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				//rem布局
				document.documentElement.style.fontSize = innerWidth/3.2 +"px";
			    window.addEventListener("resize",function(){
			        document.documentElement.style.fontSize = innerWidth/3.2  + "px";
			    },false)
			}
		</script>
	</body>
</html>